<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
    body {
        padding-top: 1.5rem;
    }

    .header {
        width: 93%;
        height: 2.5rem;
        line-height: 2.5rem;
        padding: 0.5rem 0.8rem;
        text-align: center;
        border-bottom: 1px solid rgb(243, 243, 243, 0.5);
        background-color: #fff;
        position: fixed;
        top:1.5rem;
    }

    .header_img{
      width: 6%;
      height: 45%;
      float: left;
      margin-top: 0.5rem;
    }

    .header_img img {
        width: 100%;
        height: 100%;
    }

    .header h3{
      line-height: 3rem;
      width: 90%;
      text-align: center;
    }
.nav{
  width: 93%;
  padding: 0.5rem 0.8rem;
  margin: 3rem 0rem;
}
.nav_one{
  width: 93%;
  padding: 0.5rem;
}
.nav_two{
  width: 93%;
  padding: 0.5rem;
  margin-top: 1rem;
}
.nav_two .now_s{
  width: 49%;
}
.nav_s:after{
  display:block;
    content:"";
    width: 30%;

}
.nav_one p{
  width: 93%;
  height: 1.1rem;
  line-height: 1.1rem;
  padding-left: 0.8rem;
  font-size: 1rem;
  border-left: 0.2rem solid #40cccc;
}
.nav_two p{
  width: 93%;
  height: 1.1rem;
  line-height: 1.1rem;
  padding-left: 0.8rem;
  font-size: 1rem;
  border-left: 0.2rem solid #40cccc;

}
.nav_now{
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  white-space: nowrap;

}
.now_s{
  width: 32%;
  height: 2.8rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 2.8rem;
  font-size: 0.80rem;
  margin-top: 0.2rem;
tansform: scaleX();
}
#nows{
  border: 1px solid #40cccc;
  background-color: #40cccc;
  color:#fff;
}
.no{
  width: 23%;
  height: 2.8rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 2.8rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.ss{
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.times{
  width: 95%;
  margin: 0.5rem 0rem 0.5rem 0.5;
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
  text-align: center;
}
.times span{
  display: block;
}
.footer{
  width: 95%;
  height: 3rem;
  position: absolute;
  bottom:1rem;
  left:0.6rem;
  background-color: #40cccc;
  color: #fff;
  text-align: center;;
  line-height: 3rem;
border-radius: 2rem;

}
    </style>
</head>

<body>
  <div class="header">
      <div class="header_img">
          <img src="../image/u18.png" alt="" onclick="closewin()">
      </div>
      <h3>预约课程</h3>
  </div>
<div class="nav" id="fic_list">



</div>
<p class="times">

</p>
<div class="footer" id="yy" onclick="yy()">
  预约上课
</div>
</body>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var userinfo = $api.getStorage('userinfo');

    var id
    var ficlist = new Array()
    var seclist = new Array()
    var money = 0
    apiready = function() {
      id = api.pageParam.id
      get_list()//获取预约课程参数
      get_sec()//获取预约课程参数
    //  get_timelist()//获取预约日期参数

      api.addEventListener({
          name:'pay_ok',
          extra:{
              threshold:0
          }
      }, function(ret, err){
              api.closeWin({

              });

            //	get_user()//获取用户数据

      });



    };
// 预约，创建订单
    function yy() {
      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '创建课程中...',
          text: '先喝杯茶...',
          modal: false
      });

      if(seclist.length<1){
        api.hideProgress();
        alert('请选择需要上课的章节')
        return false
      }


      api.ajax({
          url:  SITE_URL+'cur_api/bookorder/add_order',
          method: 'post',
          data: {
              values: {
                  cur_id: id,
                  user_id:userinfo.id,
                  ficlist:ficlist.join(','),
                  section:seclist.join(','),
                  price:money

              }
          }
      },function(ret, err){
          if (ret) {
            if(ret.error==200) {
                api.hideProgress();
                msgcode('订单已生成')
                api.sendEvent({
                    name: 'yy_ok',

                });
                setTimeout(function () {
                    api.openWin({
                        name: 'cur_pay',
                        url: './cur_pay.html',
                        pageParam: {
                            price: ret.data.price,
                            orderid: ret.data.orderid,
                            order: ret.data.order
                        }
                    });
                }, 1000)


            }else if(ret.error==220){
                msgcode('购买成功')
                api.sendEvent({
                    name: 'yy_ok',

                });
                setTimeout(function () {
                    api.openWin({
                        name: 'mycur',
                        url: './mycur.html',
                        pageParam: {

                        }
                    });
                }, 1000)
            }else{
              api.hideProgress();
              msgcode('创建预约订单失败')
            }
            //  alert( JSON.stringify( ret ) );
          } else {
            api.hideProgress();
            msgcode('请检查网络连接')
              //alert( JSON.stringify( err ) );
          }
      });

      // api.openWin({
      //     name: 'cur_pay',
      //     url: './cur_pay.html',
      //     pageParam: {
      //         id: id
      //     }
      // });
    }




  function get_sec() {
    var html =''
    var obj = $api.byId('fic_list');
    api.ajax({
        url: SITE_URL+'cur_api/para/sec_list',
        method: 'post',
        data: {
            values: {
                id: id,
                user_id:userinfo.id
            }
        }
    },function(ret, err){
        if (ret) {
          if(ret.error==200){
            if(ret.data.length>0){
              html +='<div class="nav_two">'
              html +='<p>选择课程章节</p>'
              html +='<div class="nav_now">'
              for (var i = 0; i < ret.data.length; i++) {
                var dat = ret.data[i]

                    if(dat.yy==1){
                      html +='<div class="now_s lis'+dat.id+'" style="background-color:#ccc" title="0" >'+dat.section+':已购买</div>'
                    }else{

                      if(i==0){
                        seclist.push(dat.id)
                        money = money + parseInt(dat.money)

                        html +='<div class="now_s lis'+dat.id+'" title="1" onclick="set_sec(this,'+dat.id+','+i+','+dat.money+')" id="nows">'+dat.section+':'+dat.start_time+'</div>'
                      }else{
                        html +='<div class="now_s lis'+dat.id+'" title="0" onclick="set_sec(this,'+dat.id+','+i+','+dat.money+')">'+dat.section+':'+dat.start_time+'</div>'
                      }

                    }



              }
              html +='</div>'
              html +='</div>'
              $api.append(obj, html);

            }
          }else{
            msgcode('该课程暂无上课章节')
          }
          //  alert( JSON.stringify( ret ) );
        } else {
          msgcode('加载章节出错')
          //  alert( JSON.stringify( err ) );
        }
    });

  }

  function set_sec(self,id,i,moneys) {
    if(self.title==1){//取消选中状态
      $(self).attr('id','id'+id)
      money = money - parseInt(moneys)
      contains(id)
      self.title=0
    }else{//增加选中状态
      $(self).attr('id','nows')
      money = money + parseInt(moneys)
      seclist.push(id)
      self.title=1
    }
    $("#yy").html('预约上课需支付:'+money+'元')
  }
    function contains(obj) {
       var e = seclist.length;
       for(var i=0;i<e;i++){
         if(seclist[i]==obj){
           seclist.splice(i,1)

         }
       }
    }


    function get_list() {

      var html =''
      var obj = $api.byId('fic_list');

      api.ajax({
          url: SITE_URL+'cur_api/para/index',
          method: 'post',
          data: {
              values: {
                  id: id
              }
          }
      },function(ret, err){
          if (ret) {
            if(ret.error==200){
              if(ret.data.length){
                for (var i = 0; i < ret.data.length; i++) {
                  var dat = ret.data[i]
                  html +='<div class="nav_two">'
                  html +='<p>'+dat.name+'</p>'
                  html +='<div class="nav_now">'
                  if(dat.list.length){
                    for (var is = 0; is < dat.list.length; is++) {
                      var date = dat.list[is]
                      if(is==0){
                        ficlist.push(date.id)
                        html +='<div class="now_s lis'+dat.id+'" onclick="set_fic(this,'+date.id+','+dat.id+','+i+')" id="nows">'+date.name+'</div>'
                      }else{
                        html +='<div class="now_s lis'+dat.id+'"  onclick="set_fic(this,'+date.id+','+dat.id+','+i+')">'+date.name+'</div>'
                      }
                    }
                  }
                  html +='</div>'
                  html +='</div>'
                }

                $(obj).prepend(html)

              }
            }
             //alert( JSON.stringify( ret ) );
          } else {
            msgcode('请检查网络连接')
             //alert( JSON.stringify( err ) );
          }
      });

    }

    function set_fic(self,fic_list,fic,xb) {
      var list = document.getElementsByClassName('lis'+fic)
      for (var i = 0; i < list.length; i++) {
        $(list[i]).attr('id','id'+i)
      }
      $(self).attr('id','nows')
      ficlist[xb] = fic_list

//      alert(ficlist)
    }
</script>

</html>
